<template>
  <div class="container email-ata-box">
    <div class="transfer-item">
      <div class="title">ATAs To Detect</div>

      <div class="mt-12">
        <div class="sub-title">可选</div>
        <a-transfer
          :titles="['', '']"
          :render="(item) => item.faultName"
          :target-keys="targetKeys"
          :selected-keys="selectedKeys"
          :list-style="{
            width: '50%',
            height: '180px',
          }"
          @change="handleChange"
          @selectChange="handleSelectChange"
        />
      </div>
    </div>

    <div class="title mt-12">
      Fault Items to Monitor-one or more Fault Items below MUST be enabled to activate ATA-based triggering of emails
    </div>

    <div class="d-flex flex-column w-100">
      <div class="mb-8 text-colort-505363 mt-8">Flightt Deck Effects</div>
      <div class="email-ata-item-box">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >

          <a-row :gutter="16" class="pl-16 ">
            <a-col :span="3" class="mt-20">
              <a-form-model-item class="check-order " style="margin-bottom:12px">
                <a-checkbox>
                  Enable
                </a-checkbox>
              </a-form-model-item>

              <a-form-model-item class="check-order">
                <a-checkbox>
                  ETOPS
                </a-checkbox>
              </a-form-model-item>
            </a-col>

            <a-col :span="4" class="mt-12">
              <a-form-model-item class="check-order2">
                <div class="mb-10 text-color-505363 fs-14">Priority</div>
                <a-input
                  placeholder="请输入"
                  style="width: 100%"
                />
              </a-form-model-item>

            </a-col>
            <a-col :offset="4" :span="4" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Activity</div>
                <a-row>
                  <a-col :span="8">
                    <a-checkbox value="Active">
                      Active
                    </a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="Inactive">
                      Inactive
                    </a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="Latched">
                      Latched
                    </a-checkbox>
                  </a-col>

                </a-row>
              </a-form-model-item>

            </a-col>
            <a-col :offset="2" :span="4" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Detected in</div>
                <a-row>
                  <a-col :span="8">
                    <a-checkbox value="RTE">
                      RTE
                    </a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="PLF">
                      PLF
                    </a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="EF">
                      EF
                    </a-checkbox>
                  </a-col>

                </a-row>
              </a-form-model-item>

            </a-col>
          </a-row>
        </a-form-model>
      </div>

    </div>
    <div class="d-flex flex-column w-100">
      <div class="mb-8 text-colort-505363 mt-8">Flightt Deck Effects</div>
      <div class="email-ata-item-box">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >

          <a-row :gutter="16" class="pl-16 ">
            <a-col :span="3" class="mt-20">
              <a-form-model-item class="check-order " style="margin-bottom:12px">
                <a-checkbox>
                  Enable
                </a-checkbox>
              </a-form-model-item>

              <a-form-model-item class="check-order">
                <a-checkbox>
                  ETOPS
                </a-checkbox>
              </a-form-model-item>
            </a-col>

            <a-col :span="4" class="mt-12">
              <a-form-model-item class="check-order2">
                <div class="mb-10 text-color-505363 fs-14">Priority</div>
                <a-input
                  placeholder="请输入"
                  style="width: 100%"
                />
              </a-form-model-item>

            </a-col>
            <a-col :offset="4" :span="4" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Activity</div>
                <a-row>
                  <a-col :span="8">
                    <a-checkbox value="Active">
                      Active
                    </a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="Inactive">
                      Inactive
                    </a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="Latched">
                      Latched
                    </a-checkbox>
                  </a-col>

                </a-row>
              </a-form-model-item>

            </a-col>
            <a-col :offset="2" :span="4" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Detected in</div>
                <a-row>
                  <a-col :span="8">
                    <a-checkbox value="RTE">
                      RTE
                    </a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="PLF">
                      PLF
                    </a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="EF">
                      EF
                    </a-checkbox>
                  </a-col>

                </a-row>
              </a-form-model-item>

            </a-col>
          </a-row>
        </a-form-model>
      </div>

    </div>
    <div class="d-flex flex-column w-100">
      <div class="mb-8 text-colort-505363 mt-8">Flightt Deck Effects</div>
      <div class="email-ata-item-box">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >

          <a-row :gutter="16" class="pl-16 ">
            <a-col :span="3" class="mt-20">
              <a-form-model-item class="check-order " style="margin-bottom:12px">
                <a-checkbox>
                  Enable
                </a-checkbox>
              </a-form-model-item>

              <a-form-model-item class="check-order">
                <a-checkbox>
                  ETOPS
                </a-checkbox>
              </a-form-model-item>
            </a-col>

            <a-col :span="4" class="mt-12">
              <a-form-model-item class="check-order2">
                <div class="mb-10 text-color-505363 fs-14">Priority</div>
                <a-input
                  placeholder="请输入"
                  style="width: 100%"
                />
              </a-form-model-item>

            </a-col>
            <a-col :offset="4" :span="4" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Activity</div>
                <a-row>
                  <a-col :span="8">
                    <a-checkbox value="Active">
                      Active
                    </a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="Inactive">
                      Inactive
                    </a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="Latched">
                      Latched
                    </a-checkbox>
                  </a-col>

                </a-row>
              </a-form-model-item>

            </a-col>
            <a-col :offset="2" :span="4" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Detected in</div>
                <a-row>
                  <a-col :span="8">
                    <a-checkbox value="RTE">
                      RTE
                    </a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="PLF">
                      PLF
                    </a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="EF">
                      EF
                    </a-checkbox>
                  </a-col>

                </a-row>
              </a-form-model-item>

            </a-col>
          </a-row>
        </a-form-model>
      </div>

    </div>
    <div class="d-flex flex-column w-100">
      <div class="mb-8 text-colort-505363 mt-8">Flightt Deck Effects</div>
      <div class="email-ata-item-box">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >

          <a-row :gutter="16" class="pl-16 ">
            <a-col :span="3" class="mt-20">
              <a-form-model-item class="check-order " style="margin-bottom:12px">
                <a-checkbox>
                  Enable
                </a-checkbox>
              </a-form-model-item>

              <a-form-model-item class="check-order">
                <a-checkbox>
                  ETOPS
                </a-checkbox>
              </a-form-model-item>
            </a-col>

            <a-col :span="4" class="mt-12">
              <a-form-model-item class="check-order2">
                <div class="mb-10 text-color-505363 fs-14">Priority</div>
                <a-input
                  placeholder="请输入"
                  style="width: 100%"
                />
              </a-form-model-item>

            </a-col>
            <a-col :offset="4" :span="4" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Activity</div>
                <a-row>
                  <a-col :span="8">
                    <a-checkbox value="Active">
                      Active
                    </a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="Inactive">
                      Inactive
                    </a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="Latched">
                      Latched
                    </a-checkbox>
                  </a-col>

                </a-row>
              </a-form-model-item>

            </a-col>
            <a-col :offset="2" :span="4" class="mt-16">
              <a-form-model-item class="check-order2">
                <div class="mb-12 text-color-505363 fs-14">Detected in</div>
                <a-row>
                  <a-col :span="8">
                    <a-checkbox value="RTE">
                      RTE
                    </a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="PLF">
                      PLF
                    </a-checkbox>
                  </a-col>
                  <a-col :span="8">
                    <a-checkbox value="EF">
                      EF
                    </a-checkbox>
                  </a-col>

                </a-row>
              </a-form-model-item>

            </a-col>
          </a-row>
        </a-form-model>
      </div>

    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
  computed: {
    ...mapState('emailNotification', ['ataList', 'FmcEventList'])
  },
  mounted() {
    this.getAtaListAll();
  },
  methods: {
    ...mapActions('emailNotification', ['getAtaListAll'])
  }
};
</script>

<style>

</style>
